<template>
  <div class="customeradd">
    <div class="top111">
      <img @click="fanhui" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>新增拜访信息</span>
      <img
        class="aaaa"
        src="../assets/总图标包含整个系统的/fanhuishouye.png"
        @click="fanhuish"
      />
    </div>
    <div class="box topmar" @click="clicktiao">
      客户名称 <input v-model="custName" type="text" placeholder="下拉搜索" />
    </div>
    <div class="box topmar">
      拜访标题 <input type="text" v-model="Mytitle" />
    </div>
    <div class="box topbor">
      <van-field
        readonly
        clickable
        label="拜访原因"
        :value="value"
        placeholder="选择城市"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
    <div class="box topbor">
      <van-field
        readonly
        clickable
        label="拜访时间"
        :value="value2"
        placeholder="选择时间"
        @click="showPopup"
      />

      <van-popup v-model="show" position="bottom" round>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="fnconfirm"
          @cancel="fncancel"
        />
      </van-popup>
    </div>
    <div class="box topmar bot">
      拜访地址 <input type="text" placeholder="请输入" v-model="address" />
    </div>
    <div class="box topmar bot">
      拜访情况 <input type="text" placeholder="请输入" v-model="situation" />
    </div>
    <div class="box topmar bot special">
      <span>竞争信息收集情况</span>
      <div><input type="text" placeholder="请输入" v-model="collect" /></div>
    </div>

    <div class="bottom">
      <div class="btn" @click="save">保存</div>
    </div>
  </div>
</template>
 
<script>
import { GetLoginApiAddXList } from "../request/aip";
export default {
  data() {
    return {
      //  点击顶部跳转
      btn: true,
      // 原因选择

      columns: ["例行走访", "售中支撑", "售前支撑"],
      // 原因
      value: "",
      showPicker: false,

      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      value2: "",
      id: "",
      custName: "",
      //标题
      Mytitle: "",
      // 地址
      address: "",
      // 情况
      situation: "",
      // 信息
      collect: "",
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    fanhuish() {
      this.$router.push("/index");
    },
    clicktiao() {
      if (!this.$route.params.custName) {
        this.$router.push("/customeraddchild");
      }
    },

    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
      // console.log(value);
    },
    showPopup() {
      this.show = true;
    },
    fnconfirm(vla) {
      this.show = false;

      let y = vla.getFullYear();
      let m = vla.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = vla.getDate();
      d = d < 10 ? "0" + d : d;
      let h = vla.getHours();
      h = h < 10 ? "0" + h : h;
      let M = vla.getMinutes();
      M = M < 10 ? "0" + M : M;
      let s = vla.getSeconds();
      s = s < 10 ? "0" + s : s;
      let dateTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
      // console.log(dateTime);
      this.value2 = dateTime;
    },
    fncancel() {
      this.show = false;
    },
    save() {
      if (this.$route.params.id) {
        GetLoginApiAddXList({
          custId: this.id, //	客户id,搜索客户列表,拿客户id
          custName: this.custName, //客户名称
          visitTime: this.value2, //拜访时间
          visitAddress: this.address || "广州天河", //	拜访地址
          visitTitle: this.Mytitle || "嘘寒问暖", //拜访标题
          visitReason: this.value, //拜访原因
          visitSituation: this.situation || "还行", //拜访情况
          collectSituation: this.collect || "对手很菜",
        }).then((res) => {
          console.log(res);
          this.$router.push("/customer");
        });
      }
    },
  },
  created() {
    // console.log(this.$route.params.id);
    // console.log(this.$route.params.custName);
    (this.id = this.$route.params.id),
      (this.custName = this.$route.params.custName);
  },
};
</script>
 
<style lang = "less" scoped>
.customeradd {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  .box {
    background-color: #fff;
    padding: 10px;

    input {
      margin-left: 30px;
      border: none;
    }
  }
}
.top111 {
  background-color: #023293;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 10px;
  img {
    width: 10px;
  }
  .aaaa {
    width: 20px;
  }
}
.bottom {
  width: 100%;

  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;

  .btn {
    background-color: #0a3399;
    width: 90%;
    margin: 10px auto;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    border-radius: 20px;
  }
}
.topmar {
  margin-top: 10px;
}
.topbor {
  border-top: 1px solid #e9e9e9;
}
.bot {
  height: 80px;
}
.special {
  display: flex;

  span {
    width: 25%;
  }
  input {
    padding-left: 8px;
    padding-top: 3px;
    margin-left: 0 !important;
  }
}
.van-cell {
  padding: 0;
}
/deep/.van-field__label {
  color: #000;
  font-size: 16px;
}
</style>